<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>失落的人</title>

    <style>
        /*<!--居中显示-->*/
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            /*background: radial-gradient(lightgray 20%,whitesmoke);*/
            background: darkolivegreen;
        }
        .man{
            width: 12em;
            height: 33em;
            font-size: 10px;
            position: relative;
        }
        .man{
            color: white;
        }
        .head{
            position: absolute;
            width: 7em;
            height: 7em;
            background-color: currentColor;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            right: 0;
        }
        .body{
            position: absolute;
            width: 6.2em;
            height: 14.4em;
            background-color: currentColor;
            top: 7em;
            border-radius: 100% 20% 0 0;
        }
        .feet::before,.feet::after{
            content: "";
            position: absolute;
            width: 4em;
            height: 1.4em;
            background-color: white;
            bottom: 0;
            left: -1.6em;
            border-radius: 1em 80% 0.4em 0.4em;
        }
        /*画出阴影*/
        .man::before{
            content: "";
            position: absolute;
            width: 12em;
            height: 0.8em;
            background-color: rgba(0,0,0,0.1);
            bottom: -0.2em;
            left: -3em;
            border-radius: 50%;
        }

        /*制作动作效果*/
        .feet::before,.feet::after{
            animation: feet-animation 2s ease-in-out infinite;
        }
        .feet::after{
            animation-delay: 1s;
        }
        @keyframes feet-animation {
            20%{
                transform: translate(3.4em,-1.6em) rotate(4deg);
            }
            30%{
                transform: translate(4.6em,-1em) rotate(0deg);
            }
            40%{
                transform: translate(5.6em,-0.6em) rotate(4deg);
            }
            44%{
                transform: translate(5.6em,0em) rotate(0deg);
            }
        }
        .head,.body{
            -webkit-animation: body-animation 4s ease-in-out infinite;
            -o-animation: body-animation 4s ease-in-out infinite;
            animation: body-animation 4s ease-in-out infinite;
        }
        @keyframes body-animation {
            0%,100%{
                /*skew斜切属性*/
                transform: translate(0) skewX(-2deg);
            }
            25%,75%{
                transform: translateX(0.5em) skewX(0deg);
            }
            50%{
                transform: translateY(0) skewX(0deg);
            }
        }
        /*阴影动画*/
        .man::before{
           animation: shadow-animate 4s ease-in-out infinite;
        }
        @keyframes shadow-animate {
            0%,50%,100%{
                transform: scale(1);
            }
            25%,75{
                transform: scale(1.15);
            }
        }
    </style>
</head>
<body>
    <div class="man">
        <span class="head"></span>
        <span class="body"></span>
        <span class="feet"></span>
    </div>
</body>
</html>